<template>
  <div class='user-profile-page'>
    <van-nav-bar left-arrow @click-left="$router.back()" title="个人信息"></van-nav-bar>
    <van-cell-group>
      <van-cell is-link title="头像" center>
        <van-image
          slot="default"
          fit="cover"
          round
          :src="list.photo"
          @click="show = true"
        />
      </van-cell>
      <van-cell @click="showa = true" is-link title="昵称" :value="list.name" />
    </van-cell-group>
    <van-cell-group style="margin-top:12px">
      <van-cell @click="showb = true" is-link title="性别" :value="list.gender ? '男' : '女'" />
      <van-cell @click="showc = true" is-link title="生日" :value="list.birthday" />
    </van-cell-group>
    <div class="logout">
      <span @click="exit">退出登录</span>
    </div>
    <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
    <van-popup
      v-model="showa"
      closeable:true
      position="right"
      :style="{ width: '100%', height: '100%' }"
    >
    <van-nav-bar
      title="编辑昵称"
      right-text="提交"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-field v-model="list.name" />
    </van-popup>
    <van-action-sheet v-model="showb" :actions="gender" @select="onGender" />
    <!-- <van-popup
      v-model="showb"
      closeable:true
      position="bottom"
      :style="{ height: '30%' }"
    >
    </van-popup> -->
    <van-popup
      v-model="showc"
      closeable:true
      position="bottom"
      :style="{ height: '40%' }"
    >
        <van-datetime-picker
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
        />
    </van-popup>
  </div>
</template>
<script>
import { getUsercont } from '@/api/user'
import { delToken } from '@/utils/storage'
export default {
  data () {
    return {
      list: [],
      show: false,
      actions: [{ name: '拍照' }, { name: '本地选择' }, { name: '取消' }],
      gender: [{ name: '男' }, { name: '女' }, { name: '取消' }],
      showa: false,
      showb: false,
      showc: false,
      minDate: new Date(1900, 0, 1),
      maxDate: new Date(2023, 5, 10),
      currentDate: new Date(2000, 2, 17)
    }
  },
  name: 'UserProfilePage',
  async created () {
    const res = await getUsercont()
    console.log(res)
    this.list = res.data.data
  },
  methods: {
    // 修改昵称
    onClickLeft () {
      this.showa = false
    },
    onClickRight () {
      // Toast('按钮')
    },
    exit () {
      delToken()
      this.$toast.success('退出成功!')
      this.$router.push('/login')
    },
    onSelect (item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false
      // Toast(item.name)
    },
    onGender (item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.showc = false
      // Toast(item.name)
    }
  }
}
</script>
<style lang="less" scoped>
.user-profile-page {
  background: #f8f8f8;
  .van-image {
    display: block;
    float: right;
    width: 30px;
    height: 30px;
  }
  .van-cell__title {
    width: 50px;
    flex: none;
  }
}
.logout {
  text-align: center;
  position: absolute;
  left: 0;
  bottom: 30px;
  width: 100%;
  // color: @geek-color;
}
</style>
